<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入评论（最多吐槽120字）" maxlength="120" v-model="content">

        </textarea>
        <mt-button type="primary" size="large" @click="addCom">发表评论</mt-button>
        <div class="cmt-list">
            <div class="cmt-item" v-for="(c,i) in comments" :key="c.commentId">
                <div class="cmt-title">
                    第{{i+1}}楼&nbsp;&nbsp;用户：{{c.userName}}&nbsp;&nbsp;
                    发表时间：{{c.addTime | dateFmt()}}
                </div>
                <div class="cmt-body">
                   {{c.content}}
                </div>
            </div>
        </div>
         
        
        
        <mt-button type="danger" size="large" @click="loadMore()">加载更多</mt-button>
    </div>
   
</template>
<script>
import { Toast } from 'mint-ui';
import moment from 'moment'
export default {
    props:["id"],
    data(){
        return {
            comments:[],
            pageNum:1,
            pageTotal:0,
            content:""

           
        }
    },
    methods:{
        getAllCs(){
            this.$ajax({
                url:"/findComments",
                method:"get",
                params:{
                    "newsId":this.id,
                    "pageNum":this.pageNum
                }
            }).then(resp=>{
                this.comments.push(...resp.data.message) ;
                this.pageTotal = resp.data.fyobj;
            });
        },
        loadMore(){
            this.pageNum = this.pageNum+1;
            //查询出总共多少页
            if(this.pageNum > this.pageTotal){
                Toast("亲，没有评论了");
                return;

            }
            this.getAllCs();
        },
        addCom(){
            if(this.content.trim().length == 0){
                return Toast('内容不能为空');

            }
            let comment = {
                "content":this.content,
                "addTime":moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
                "newsId":this.id,
                "userId":2
            }
            let cm = {
                "content":this.content,
                "addTime":moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
                "userName":"匿名用户"
            }
            this.$ajax({
                url:"/addComment",
                method:'post',
                data:comment
            }).then(resp=>{
                this.comments.unshift(cm);
            });
        }
     
    },
    created(){
        this.getAllCs();     
    }

}
</script>
<style scoped>
h3{
    font-size:18px;

}
textarea{
    font-size:14px;
    height: 85px;
    margin:0;
}
.cmt-item{
    margin-top: 5px;
    font-size:13px;
}
.cmt-title{
    line-height: 30px;
    background-color: #ccc;
}
.cmt-body{
    line-height: 35px;
    text-indent: 2em;
}


</style>